<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sequence Diagram</title>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>

    <style type="text/css">
        .message-content {
            font-size: 70%;
            white-space: pre-wrap;
        }

        .sequence_diagram_clickable {
            cursor: pointer;
        }

        .property-sheet {
            background-color: #F5F9FD;
            border: 1px solid #C3D9FF;
            border-collapse: collapse;
            width: 100%;
        }

        .message-payload {
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: #F5F9FD;
            border: 1px solid #C3D9FF;
            border-collapse: collapse;
        }

    </style>
    $extensions:{extension|
        $include.({$extension.url$}).head;format="raw"$
    }$
</head>
<body>

<div id="payloads" style="display:none;">
    $messages:{message|
    <div class="message-content" message-id="$message.properties.messageId$">
        <div class="message-controls"></div>
        <table class="property-sheet" style="margin-top:-50px;">
            <tr>
                <th colspan="2">Properties</th>
            </tr>
            $message.properties.keys:{key |
            <tr>
                <td><strong>$key$: </strong></td>
                <td>$message.properties.(key)$</td>
            </tr>
            }$
        </table>
        <div class="message-payload">
            $message.body$
        </div>
    </div>

    }$
</div>

$if(messages.empty)$
    <p>Nothing Found</p>
$else$
    <div id="sequence-diagram-svg">
        $sequenceDiagramSvg$
    </div>
$endif$

<br/>
<div id="extensions">
$extensions:{extension|
    <div id="$extension.id$">
    $include.({$extension.url$}).body;format="raw"$
    </div>
}$
</div>

<div id="message-details"></div>

<script type="text/javascript">


    var createDialogsForSequenceDiagramMessages = function () {
        var messagePayloadDialogs = {};
        jQuery(".sequence_diagram_clickable").each(function () {
            var sequenceDiagramMessageId = jQuery(this).attr("sequence_diagram_message_id").replace(/_/g,"-");

            var dialogContent = jQuery('[message-id="'+sequenceDiagramMessageId+'"]').clone();

            var capturedInputAndOutputsName = jQuery(this).text();
            messagePayloadDialogs[sequenceDiagramMessageId] = dialogContent.dialog({title:capturedInputAndOutputsName, minWidth:800, stack:false, closeOnEscape:true, autoOpen:false });
        });

        return messagePayloadDialogs;
    };

    jQuery(document).ready(function () {
        var messagePayloadDialogs = {};

        var isInitialised = false;


        jQuery(".sequence_diagram_clickable").click(function () {

            if (!isInitialised) {
                messagePayloadDialogs = createDialogsForSequenceDiagramMessages();
                isInitialised = true;
            }

            var sequenceDiagramMessageId = "" + jQuery(this).attr("sequence_diagram_message_id").replace(/_/g,"-");
            var dialog = messagePayloadDialogs[sequenceDiagramMessageId];
            dialog.openMethod = "click";
            dialog.dialog("open");
        });
    });

</script>

</body>
</html>
